import { useEffect, useRef, useState } from "react"
import shouyeCss from "../css/shouye.module.less"
import { getTeacher, get_student } from "../request/instance"
import * as echarts from 'echarts';

export default function Shouye() {
    // STATE
    let box = useRef() // 动画
    let box2 = useRef() // 老师占比表
    let box3 = useRef() // 学生省份表
    const [teacherNum, setTeacherNum] = useState(0)
    const [teacherManNum, setTeacherManNum] = useState(0)
    const [teacherWomanNum, setTeacherWomanNum] = useState(0)
    const [teacherList, setTeacherList] = useState([])
    const [studentList, setStudentList] = useState([])
    // FUNC
    useEffect(() => {
        setTimeout(() => {
            box.current.classList.add(shouyeCss.box1)
        }, 0);
    }, [])

    useEffect(() => {
        getTeacher().then(res => {
            let teacher = res.data.teacher
            setTeacherList(teacher)
            let teacherMan = teacher.filter(i => i.sex === "男")
            let teacherWoman = teacher.filter(i => i.sex === "女")
            setTeacherNum(teacher.length)
            setTeacherManNum(teacherMan.length)
            setTeacherWomanNum(teacherWoman.length)
        })
        get_student().then(res => {
            let student = res.data.student
            let studentObj = {}
            student.forEach(i => {
                if (studentObj[i.ori]) {
                    studentObj[i.ori]++
                } else {
                    studentObj[i.ori] = 1
                }
            });
            // console.log(studentObj)
            let studentList1 = []
            for (const name in studentObj) {
                if (studentObj.hasOwnProperty(name)) {
                    studentList1.push({ value: studentObj[name], name: name })
                }
            }
            setStudentList(studentList1)
            // console.log(studentList)
        })
    }, [])

    useEffect(() => {
        let myChart = echarts.init(box2.current);
        myChart.setOption({
            title: {
                text: '我校男女老师占比'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: teacherManNum, name: '男老师' },
                        { value: teacherWomanNum, name: '女老师' },
                    ]
                }
            ]
        });
    }, [teacherManNum, teacherWomanNum])

    useEffect(() => {
        let myChart = echarts.init(box3.current);
        myChart.setOption({
            title: {
                text: '地区学生占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: studentList,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    }, [studentList])

    return <div className={shouyeCss.box} ref={box}>
        <div className={shouyeCss.box2} ref={box2}></div>
        <div className={shouyeCss.box2} ref={box3}></div>
    </div>
}